<template>
  <div>
    <!-- 编辑 -->
    <div class="message">
      <div><h1>这是一个供应商名称+编号</h1></div>
      <div>
        <el-form
          :inline="true"
          ref="elForm"
          type="text"
          :model="form"
          :rules="rules"
          size="medium"
          label-width="150px"
          style="margin: 20px 80px 0 10px"
        >
          <el-form-item label="创建人:">
            <!-- <span> {{拿到数据渲染}} </span> -->
            <span>{{ formData.createBy }}</span>
          </el-form-item>

          <el-form-item label="创建时间:">
            <span>{{ formData.createTime }}</span>
          </el-form-item>
          <el-form-item label="最后修改人:">
            <span>{{ formData.updateBy }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ formData.updateTime }}</span>
          </el-form-item>
        </el-form>
        <div class="remove">
          <el-popover placement="top" width="160"  v-model="visible" >
            <p>这是一段内容这是一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
            </div>
            <el-button style="margin-bottom: 60px;"  slot="reference">删除</el-button>
          </el-popover>
        </div>
      </div>
      
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
      <el-tab-pane label="基础信息" name="first">
        <Ty></Ty>
      </el-tab-pane>
      <el-tab-pane label="项目建模" name="second">
        <Ats></Ats>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  listSupplier,
  getSupplier,
  delSupplier,
  addSupplier,
  updateSupplier,
} from "@/api/supplier/supplier";
import Ty from "@/components/projectType/index.vue";
import Ats from "@/components/projectType/accounts.vue";
export default {
  name: "Material",
  dicts: ["is_check"],
  components: {
    Ty,
    Ats,
  },
  data() {
    return {
      visible: false,
      formData: {},
      activeName: "first",
    };
  },
  created() {
    console.log("query", this.$route.query.id);

    getSupplier(this.$route.query.id).then((response) => {
      this.formData = response.data;
      console.log("res", response.data);

      this.formData.city = response.data.city.split(",")[1];
      this.formData.county = response.data.county.split(",")[1];
      this.formData.province = response.data.province.split(",")[1];

      console.log("form", this.formData);
    });
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.message {
  margin-top: 10px;
  padding-left: 20px;
  width: 50%vh;
  height: 170px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  
  span {
    font-size: 20px;
    margin-right: 120px;
  }
 
}

</style>
